<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    :width="modalWidth"
    :maskClosable="false"
    :destroyOnClose="true"
    wrapClassName="custom-modal min-base-modal"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div v-if="modalType === 'import'">
      <WebUploader
        @finishedUpload="finishedUpload"
        @cancelUpload="finishedUpload"
        @isUploading="isUploading"
      />
    </div>

    <!-- 删除 -->
    <div v-if="modalType === 'delete'">
      <div class="text-content">是否确认删除此条数据?</div>
    </div>

    <template #footer>
      <template v-if="!['import'].includes(modalType)">
        <a-button class="cancel" @click="handleCancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
          class="common-buttom"
        >
          确认
        </a-button>
      </template>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'

import WebUploader from './WebUploader/index.vue'

import { delOne } from './serve.api'

const emit = defineEmits(['isOk'])

const visible = ref<boolean>(false)
const loading = ref<boolean>(false)

const modalTitle = ref('')
const modalType = ref('')
const modalWidth = ref('')
const modalData = ref({})

const formState = ref({})

defineProps({
  selectList: {
    type: Array,
    default: () => []
  }
})

const showModal = (type: string, data?: any) => {
  visible.value = true
  modalType.value = type
  modalData.value = data

  switch (type) {
    case 'import':
      modalTitle.value = '新增无人机巡视任务'
      modalWidth.value = '26.25rem'
      formState.value = {}
      break
    case 'delete':
      modalTitle.value = '删除无人机巡视任务'
      modalWidth.value = '26.25rem'
      formState.value = data
      break
    default:
      break
  }
}

const handleOk = async () => {
  try {
    if (modalType.value === 'delete') {
      delOneFun(modalData.value)
    }
  } catch (error) {
    console.log('Failed:', error)
  }
}

// 删除
const delOneFun = (data: any) => {
  loading.value = true
  delOne({ id: data.id })
    .then(() => {
      loading.value = false
      visible.value = false
      message.success('删除成功')
      emit('isOk')
    })
    .catch(() => {
      loading.value = false
      visible.value = false
    })
}

// 取消
const handleCancel = () => {
  visible.value = false
  // formRef.value?.resetFields()
}

// ============= 上传 =============

// 获取是否正在上传ing的状态
const isUploadingFlag = ref<boolean>(false)
function finishedUpload() {
  visible.value = false
  emit('isOk')
  resetData()
}

const isUploading = (flag: boolean) => {
  isUploadingFlag.value = flag
}

const resetData = () => {
  // 成功or失败后,清空弹窗数据
  // modalType.value = 'delete'
  // formState.id = undefined
  // formState.dataType = undefined
}

defineExpose({ showModal })
</script>
